<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
    <title>Title</title>
    <script type="text/javascript" src="/static/Js/jQuery-3.5.1.js"></script>
    <script type="text/javascript" src="/static/Js/socket.io.js"></script>
    <script type="text/javascript" src="/static/Js/bootstrap/bootstrap.min.js"></script>
    <script type="text/javascript" src="/static/Js/UserFullNameWaterMark.js"></script>
    <script type="text/javascript" src="/static/Js/watermark.js"></script>
    <script type="text/javascript" src="/static/Js/GetUserParam.js"></script>

    <link rel="stylesheet" href="/static/Css/bootstrap.min.css">
    <!--/static/Js/bootstrap/bootstrap.min.js
    @{/webjars/bootstrap/4.4.1/css/bootstrap.css}-->
    <style>
        html,body{
            min-height: 100vh;
        }
        div.row{
            margin-top: 10px;

        }
        #alert_span01{
            margin-top: 20px;
            color: red;
            border-radius: 100px;
            opacity: 0.7;
            filter: alpha(opacity=70);
            font-weight: bold;
            padding: 5px;
            float: left;

        }
        #bg_body{
            background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
            width: auto;
            height: auto;
        }
        #alert_span02{
            margin-top: 20px;
            color: green;
            border-radius: 100px;
            opacity: 0.7;
            filter: alpha(opacity=70);
            font-weight: bold;
            padding: 5px;
            float: left;

        }
        #fl_win{
            position: fixed;
            display: block;
            width: 100px;
            height: 48px;
            right: 0;
            bottom: 120px;
        }
        .modal-dialog{
            width: 80%;
            height: 80%;
        }
        .modal-dialog-centered.modal-dialog-scrollable .modal-content{

        }

        #modal_dialog_content01{
            background-color: rgba(255,255,255,.8);
        }
        #modal_right_div {

            display: block;
            width: 100px;
            height: 48px;
            right: 0;
            bottom: 0;
        }
        #pram_select_01{
            display: inline-block;
            position: absolute;
        }
        .col-md-4 {
            -ms-flex: 1 0 50% !important;
            flex: 1 0 50% !important;
            max-width: 50% !important;
        }
        .s_cFun {
            width: 100%;
            height: calc(1.5em + .75rem + 2px);
            border-radius: 5px;
            border-style: none;
        }

    </style>

</head>
<body id="bg_body" >

<div id="header" >
</div>
<div id="fl_win">
    <!-- Button trigger modal -->
    <button type="button" name="nameAddButton" id="itemSubtractButton_Id"  onclick="deleteMsgModal()" class="btn btn-danger" style="margin-bottom: 10px">&ensp;-&ensp;</button>
    <button type="button" name="nameAddButton" id="itemAddButton_Id" onclick="itemAddButton()" class="btn btn-info" style="margin-bottom: 10px">&ensp;+&ensp;</button>
    <button type="button" name="nameAddButton" id="submit_Check_Button" onclick="submit_Check_Button()" class="btn btn-primary" >提交</button>
</div>
<div class="container" id="head_div">
    <div class="row" id="row_01" name="row">
            <div class="col" style="margin-left:auto">
                <div class="input-group input-group-lg">
                    <input type="text" class="form-control" aria-label="Sizing example input"  name="post_check_Point_Name" placeholder="请输入点位名称：" id="post_check_Point_Name" aria-describedby="inputGroup-sizing-lg">
                </div>
            </div>
            <div class="col"  >
                <h5 role="alert" id="alert_span01" >

                </h5>
                <h5  role="alert" id="alert_span02" >

                </h5>
            </div>
            <div class="col">
                <button type="button" name="nameAddButton" id="nameAddButton" onclick="nameAddButton()" class="btn btn-outline-primary">确认</button>
            </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="exampleModal" data-backdrop="static" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable" id="modal_dialog_01">
        <div class="modal-content" id="modal_dialog_content01" >
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">属性设置</h5>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="row">
                        <div id="c_m_4" class="col-md-4 overflow-auto" style="height: 800px;overflow: auto;width: 100%;display: inline-block"></div>
                        <div class="col-md-4 ml-auto" style="width: 100%" id="modal_right_div">
                                <h7>请选择点检归属:</h7><br>
                                <select class="custom-select" id="pram_select_01">
                                    <option selected value="Final_Check1">终检1系</option>
                                    <option value="Final_Check2">终检2系</option>
                                    <option value="Manage">管理系</option>
                                    <option value="Sampling">抽查系</option>
                                </select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" onclick="clear_modal()" data-dismiss="modal">修改</button>
                <button type="button" class="btn btn-primary" onclick="check_ok_submit()">确认</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal  002 -->
<div class="modal fade" id="exampleModal01" tabindex="-1" aria-labelledby="exampleModalLabel01" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel01">删除确认</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="deleteMsg">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" onclick="itemSubtractButton()" data-dismiss="modal" class="btn btn-primary">确认</button>
            </div>
        </div>
    </div>
</div>


<!-- Modal -->
<div class="modal fade" id="exampleModal02" tabindex="-1" aria-labelledby="exampleModalLabel02" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel02">提示</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="is_null_modal">

                未输入内容请检查
            </div>
            <div class="modal-footer">
                <button type="button" onclick="modalClose()" class="btn btn-primary">确定</button>
            </div>
        </div>
    </div>
</div>


<script>
    UserFullNameWaterMark()
    /*
        *
        * */
    /*数组集合*/
    window.a_rowStrArr = [];
    window.a_row_sm_colArr = [];
    window.a_row_1_colArr = [];
    window.a_row_col_inArr = [];
    window.a_row_2_colArr = [];
    window.a_row_in_g_colArr = [];
    window.a_row_in_g_t_colArr = [];
    window.a_row_f_colArr = [];
    window.numArr = [];
    var i = 1;
    $("#alert_span02").hide();
    $("#alert_span01").hide();
    $("#submit_Check_Button").hide();
    $("#itemAddButton_Id").hide();
    $("#itemSubtractButton_Id").hide();

    function itemAddButton() {
        var itemStr ="itemAddButton_Id" + i;
        $($('#'+(itemStr)+'')).hide()
        i++
        var str;
        str ='<div class="row" name="row" id="row_'+i+'">'
            + '                    <div class="col-sm-auto" style="margin-top: 10px" id="row_sm_col'+i+'">'+i+'</div>'
            +'                     <div class="col" id="row_1_col'+i+'">'
            +'                         <input id="row_col_in_item'+i+'" type="text" class="form-control" aria-label="Sizing example input" name="post_check_Point_Item" placeholder="请输入点检项目：" aria-describedby="inputGroup-sizing-lg">'
            +'                     </div>'
            +'                     <div class="col" id="row_2_col'+i+'">'
            +'                         <input id="row_col_in_fun'+i+'" class="form-control s_cFun" placeholder="方式:如目视、操作">'
            +                     '</div>'
            +'                     <div class="col" id="row_3_col'+i+'">'
            +'                         <input id="row_col_in_benchmark'+i+'" class="form-control s_cFun" placeholder="基准:如正常动作、显示正常">'
            +                     '</div>'
            +'                     <div class="col" id="row_4_col'+i+'">'
            +'                         <div class="input-group mb-3" id="row_in_g_col'+i+'">'
            +'                             <label class="input-group-text" for="row_f_col'+i+'" id="row_in_g_t_col'+i+'">标准</label>'
            +'                             <input type="file" class="form-control" id="row_f_col'+i+'">'
            +'                         </div>'
            +'                     </div>'
            +'                 </div>';
        $("#head_div").append(str);
        $("#itemSubtractButton_Id").show();
    }
    function nameAddButton() {
        let name = document.getElementById("post_check_Point_Name").value
        if (name !== ""){
            $.post("/spot_check/addPointName",{post_check_Point_Name:document.getElementById("post_check_Point_Name").value},function (result){
                if (result.flag){
                    $("#alert_span02").show()
                    $("#alert_span02").html(result.errorMsg)
                    $("#alert_span01").hide()
                    $("#nameAddButton").hide()
                    $("#submit_Check_Button").show();
                    $("#itemAddButton_Id").show();
                    $("#post_check_Point_Name").attr("disabled","true")

                    var str;
                    str ='<div class="row" name="row" id="row_'+i+'">'
                        + '                    <div class="col-sm-auto" style="margin-top: 10px" id="row_sm_col'+i+'">'+i+'</div>'
                        +'                     <div class="col" id="row_1_col'+i+'">'
                        +'                         <input id="row_col_in_item'+i+'" type="text" class="form-control" aria-label="Sizing example input" name="post_check_Point_Item" placeholder="请输入点检项目：" aria-describedby="inputGroup-sizing-lg">'
                        +'                     </div>'
                        +'                     <div class="col" id="row_2_col'+i+'">'
                        +'                         <input id="row_col_in_fun'+i+'" class="form-control s_cFun" placeholder="请输入点检方式">'
                        +                     '</div>'
                        +'                     <div class="col" id="row_3_col'+i+'">'
                        +'                         <input <input id="row_col_in_benchmark'+i+'" class="form-control s_cFun" placeholder="基准:如正常动作、显示正常">'
                        +                     '</div>'
                        +'                     <div class="col" id="row_4_col'+i+'">'
                        +'                         <div class="input-group mb-3" id="row_in_g_col'+i+'">'
                        +'                             <label class="input-group-text" id="row_in_g_t_col'+i+'">标准</label>'
                        +'                             <input type="file" class="form-control" id="row_f_col'+i+'">'
                        +'                         </div>'
                        +'                     </div>'
                        +'                 </div>';
                    $("#head_div").append(str);

                }else {
                    $("#alert_span01").show()
                    $("#alert_span02").hide()
                    $("#alert_span01").html(result.errorMsg)
                    $("#post_check_Point_Name").focus();
                }
            })
        }else {
            $("#exampleModal02").modal("show")
        }

    }
    $.get('../HeadPage.html',function(data){
        $("#header").html(data)
    })
    $.get("../Toasts.html",function (data){
        $("#ToastsPage").html(data)
    })
    function getPageUrl() {
        return window.location.pathname
    }

    /*function check_ok_submit() {
        //改mongo中的状态
        $.post("",,function () {

        })
    }*/

    function deleteMsgModal() {
        $("#deleteMsg").html("请确认是否删除第"+i+"行")
        $("#exampleModal01").modal("show")
    }
    function itemSubtractButton(){


        var s_rowStr = "row_" + i;
        $($('#'+(s_rowStr)+'')).remove();
        /*$(".modal fade").hide();
        $(".modal-backdrop").remove()*/
        i--;
        if (i <= 1) {
            $("#itemSubtractButton_Id").hide();
        }

    }
        function fileSelected(fileArr ,nameArr,funArr,benchmarkArr) {
            let filS = [];
``
            $.each(fileArr,function (num,file){
                const itemStr = "row_f_col" + file;
                const fbutton = $($("#" + (itemStr) + ""))[0];
                const file_up = fbutton.files[0];
                filS.push(file_up)
            })

              //DOM
               //fbutton.files可能一次选择了多个文件
            /*fbutton.value = "";  //清空选择*/
            startUpload(filS,nameArr,funArr,benchmarkArr);   //开始上传
        }

        // 开始上传, 参数为 File 对象
        function startUpload( filS ,nameArr,funArr,benchmarkArr )
        {
            var numArr1 = [];
            var num1;
            // 手工构造一个 form 对象
            var formData = new FormData();
            $.each(filS,function (num,file){
                // 'file' 为HTTP Post里的字段名, file 对浏览器里的File对象
                num1 = num;

                if (file === undefined){
                    numArr1.push(num + 1)
                }else {
                    formData.append('file', file);
                }


            })
            formData.append("a_row_col_inArrName",nameArr)
            formData.append("sc_fun",funArr)
            formData.append("benchmarkArr",benchmarkArr)
            formData.append("num",numArr1);
            // 手工构造一个请求对象，用这个对象来发送表单数据
            // 设置 progress, load, error, abort 4个事件处理器

            $.ajax({
                type: 'POST',
                url: '/spot_check/loadImage',
                data: formData,
                dataType: 'multipart/form-data',
                processData: false, // 告诉jQuery不要去处理发送的数据
                contentType: false, // 告诉jQuery不要去设置Content-Type请求头
                success: function (res) {


                },
                complete:function () {
                    downLoadImage();
                }
            });




        }
    // BASE64转图片
    function formatByte2Img(buffer) {
        console.log(buffer)
        let file = buffer; // 把整个base64给file
        var type = "image/jpeg"; // 定义图片类型（canvas转的图片一般都是png，也可以指定其他类型）
         // 调用base64转图片方法
        return base64ToBlob(file, type)
    }
    // conversions 就是转化之后的图片文件，

    function base64ToBlob(urlData, type) {
        let arr = urlData.split(',');
        let mime = arr[0].match(/:(.*?);/)[1] || type;
        // 去掉url的头，并转化为byte
        let bytes = window.atob(arr[1]);
        // 处理异常,将ascii码小于0的转换为大于0
        let ab = new ArrayBuffer(bytes.length);
        // 生成视图（直接针对内存）：8位无符号整数，长度1个字节
        let ia = new Uint8Array(ab);
        for (let i = 0; i < bytes.length; i++) {
            ia[i] = bytes.charCodeAt(i);
        }
        return new Blob([ab], {
            type: mime
        });
    }

    function downLoadImage() {

        $.ajax({
            type:"POST",
            contentType:"application/json;charset=utf-8",
            dataType:"json",
            url:"/spot_check/downLoadImage",
            success:function (result) {
                /*for (const resultElement of result) {

                    $("#"+resultElement.point_Content_Id).append("<img  style='width: 120px;height: 90px;float: right' alt=\"\" src= "+staticPath+resultElement.imageName+">")
                }*/
                console.log(result)

                    let staticTempPath = "/Spot_check/TempImage/"
                    for (const resultElement of result) {
                        let imgSrc;
                        if (resultElement.imageName === "null.jpeg") {
                            imgSrc = "/Canva.png"
                        } else {
                            imgSrc = staticTempPath + resultElement.imageName
                        }
                        $("#" + resultElement.pointContentId).append("<div style='display: inline-block;float: right'>" + "<img  style='width: 120px;height: 120px' alt=\"\" src= " + imgSrc + ">" + "</div>")
                    }
                    }


        });
    }


    window.evt_upload_progress = function (evt)
        {
            if (evt.lengthComputable)
        {
            var progress = Math.round(evt.loaded * 100 / evt.total);
            Af.log ("上传进度: " + progress);
        }
        };
        window.evt_upload_complete = function (evt)
        {
            if(evt.loaded == 0)
        {
            Af.log ("上传失败!");
        }
            else
        {
            Af.log ("上传完成!");
            var response = JSON.parse(evt.target.responseText);
            Af.log (response);
        }
        };
        window.evt_upload_failed = function (evt)
        {
            Af.log  ("上传出错");
        };
        window.evt_upload_cancel = function (evt)
        {
            Af.log( "上传中止!");
        };

    function submit_Check_Button(){



        let numArr = [];
        let nameArr = [];
        let fileArr = [];
        let funArr = [];
        let benchmarkArr = [];
        let arr_row_sm_col = $("[id^='row_sm_col']")
        let arr_row_col_item = $("[id^='row_col_in_item']")
        let arr_row_col_fun = $("[id^='row_col_in_fun']")
        let arr_row_col_benchmark = $("[id^='row_col_in_benchmark']")
        let arr_row_f_col = $("[id^='row_f_col']")
        for (let j = 0; j < arr_row_sm_col.length; j++) {
            numArr.push( arr_row_sm_col[j].innerHTML)
            nameArr.push(arr_row_col_item[j].value)
            funArr.push(arr_row_col_fun[j].value)
            benchmarkArr.push(arr_row_col_benchmark[j].value)
            fileArr.push(j+1);

        }

        $.ajax({
            type: 'POST',
            contentType: 'application/json;charset=utf-8', // 发送的数据类型
            dataType: 'json',   // 接收的数据类型
            url: '/spot_check/checkIsNull',
            data:JSON.stringify({a_row_col_inArrName:nameArr,funArr:funArr,benchmarkArr:benchmarkArr}),
            success: function (res) {
                $.each(res.data,function (num,data) {
                        var p = "<div style=' word-wrap: break-word;word-break: break-all;width: 100%;height: auto;display: inline-block' id=" + (num+1) + ">" + data.pointContentId + ':&ensp;' + data.pointContent + '&ensp;'+"</div>"+"<hr style='width: 100%;border-top: 1px solid rgba(255,255,255,.7)'>"
                        $("#c_m_4").append(p)

                })
                $("#exampleModal").modal("show");
            }
        })

        fileSelected(fileArr, nameArr,funArr,benchmarkArr);



    }
    function clear_modal(){
        $.ajax({
            type:"POST",
            contentType:"application/json;charset=utf-8",
            dataType:"json",
            url:"/spot_check/reviseItem",
            async:false,
            success:function (result){

            },
            error:function (err){

            }
        })
        $("#c_m_4").empty();
    }
    function check_ok_submit(){
        let groupOption = $("#pram_select_01 option:selected").attr("value")
        var point_name = $("#post_check_Point_Name").val()

        $.post("/spot_check/check_ok_submit",{pointName:point_name,groupOption:groupOption},function (result) {
            if (result.flag) {
                let message= "刚刚";
                var html = '<div class="toast" role="alert"  data-delay="5000" aria-live="assertive" aria-atomic="true" >'
                    +'       <div class="toast-header">'
                    +'         <img height="25px" width="25px" src="/static/Img/PageImg/Canva_small.png" class="rounded mr-2" alt="">'
                    +'         <strong class="mr-auto" style="color: green">提交成功</strong>'
                    +'          &nbsp;&nbsp;&nbsp;&nbsp;'
                    +'         <small class="text-muted">'+message+'</small>'
                    +'         <button type="button" class="ml-2 mb-1 close" onclick="deleteToast()" data-dismiss="toast" aria-label="Close">'
                    +'           <span aria-hidden="true">&times;</span>'
                    +'         </button>'
                    +'       </div>'
                    +'       <div class="toast-body">'
                    +'          &nbsp;&nbsp;&nbsp;&nbsp;'
                    +           "信息提交成功!"
                    +'          &nbsp;&nbsp;&nbsp;&nbsp;'
                    +'       </div>'
                    +'     </div>';
                $("#message_Div").append(html)
                $('.toast').toast("show")
                setTimeout(function () {
                    window.location.href = "Spot_Check_Add_Background.html"
                },3000)
            }
        })

    }
    function modalClose() {
        $("#exampleModal02").modal("hide")
        $("#post_check_Point_Name").focus()
    }
</script>
</body>
</html>
